<?php
include('./SourceCode/Session.php');
include('/SourceCode/mysqli_connect.php');
$header_name = "Trang chính";
include ('Header.php');
?>
<script>
        function submitchat(){
        if(chatform.chattext.value==''){
            alert('Thông tin nhập không đầy đủ !');
            return;
        }
        var chattext = chatform.chattext.value;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById('list-content').innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open('GET','addchat.php?ct='+chattext,true);
        xmlhttp.send();
        }
        </script>
 <div id='main'>
        <div id='main-header'>
            header
        </div><!-- End header -->
        <div id='main-body'>
            <div id='main-left'>
                <div id='ml-head'>
                    <div id='ml-banner'>Danh sách người dùng</div>                    
                    <div id='ml-online'>
                        <a href='#' title='user-online' class='tab'>12</a>
                </div>
                    <div id='ml-number'>
                        <a href='#' title='user-list' class='active tab'>20</a>
                    </div>
                </div>
                <div id='ml-body'>
                    <div id='user-list' class='showtab'>
                    <ul class='list-online'>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                    </ul>
                    </div>
                    <div id='user-online' class='showtab'>
                    <ul class='list-online'>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                        <li>
                            <img src='Images/users.png' alt='online-images' class='u-online-img' width='70' height='70'/>
                            <span class='u-online-name'><a href=''>Harem</a></span>
                        </li>
                    </ul>
                    </div>
                </div>
            </div><!-- End Main Left bar -->
            <div id='main-center'>
                <div id='chat-list'>
                    <ul id='list-content'>
                        <li>
                            <div class='chat-info'>
                            <div class='c-user-img'><img src='Images/users.png' alt='user-icon' width='50' height='50'/></div>
                            <div class='c-user-name'>Harem</div>
                            <div class='c-time'>12:20:30 Monday</div>
                            </div>
                            <p class='c-text'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
                        </li>
                        <li>
                            <div class='chat-info'>
                            <div class='c-user-img'><img src='Images/users.png' alt='user-icon' width='50' height='50'/></div>
                            <div class='c-user-name'>Harem</div>
                            <div class='c-time'>12:20:30 Monday</div>
                            </div>
                            <p class='c-text'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
                        </li>
                    </ul>
                </div>
                <div id='form'>
                    
                    <div id='frm-chat'>
                        <input id='chat-text' type='text' name='chattext' value='' size='60' class='text-chat'>
                    </div>
                    <div id='submit-chat'>
                        <a href='#' id='chat-submit'>Chat</a>
                    </div>
 
                </div>
            </div>
            <div id='main-right'>right bar</div>
        </div>
        <div id='main-bottom'>bottom</div>
        </div>
<?php
include('Footer.php'); 